<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线支付 - 液化气用户家财险</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .modal { display:none; position:fixed; bottom:-100%; left:0; right:0; background:white; transform:translateY(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); max-height:90vh; z-index:50; }
        .modal.show { transform:translateY(0); bottom:0; }
        .modal-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; transition:opacity .3s ease; z-index:40; }
        .modal-backdrop.show { display:block; opacity:1; }
        .payment-method { @apply w-full h-[64px] border rounded-lg flex items-center px-6 gap-4 cursor-pointer transition-colors; }
        .payment-method.active { @apply border-blue-600 bg-blue-50; }
        .payment-method:not(.active):hover { @apply border-gray-400 bg-gray-50; }
        .payment-method input[type="radio"] { @apply w-6 h-6; }
        .payment-method i { @apply text-[28px]; }
        .payment-method span { @apply text-[16px]; }
    </style>
</head>
<body class="bg-gray-100">
    <!-- 状态提示 -->
    <div class="bg-white p-6 text-center">
        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-50 text-blue-600 mb-4">
            <i class="fas fa-credit-card text-[32px]"></i>
        </div>
        <h1 class="text-[20px] font-bold mb-2">请支付保费</h1>
        <p class="text-[15px] text-gray-600">总保费：<span id="headerTotalPremium" class="text-red-600 font-bold"></span> 元</p>
    </div>

    <div class="pb-[92px] mt-2">
        <!-- 产品与期间 -->
        <div class="bg-white p-4 space-y-3">
            <h2 class="text-[17px] font-bold">投保信息</h2>
            <div class="grid grid-cols-1 gap-3 text-[15px] text-gray-700">
                <div class="flex flex-wrap gap-6">
                    <div><span class="text-gray-500">产品名称：</span><span id="productName" class="font-medium">液化气用户家财险</span></div>
                    <div><span class="text-gray-500">保险公司：</span><span id="insurer" class="font-medium">人保财险</span></div>
                    <div><span class="text-gray-500">保险期间：</span><span id="periodText" class="font-medium">1年</span></div>
                    <div><span class="text-gray-500">保险起期：</span><span id="startText" class="font-medium"></span></div>
                    <div><span class="text-gray-500">保险止期：</span><span id="endText" class="font-medium"></span></div>

                    <div><span class="text-gray-500">投保份数：</span><span id="quantityText" class="font-medium"></span></div>
                </div>
            </div>
        </div>

        <!-- 方案与保障责任 -->
        <div class="bg-white mt-2 p-4">
            <div class="flex items-center justify-between mb-3">
                <h2 class="text-[17px] font-bold">保障方案</h2>
                <div class="text-[15px] text-gray-700">已选择：<span id="planName" class="font-semibold text-blue-600">A款</span></div>
            </div>
            <div id="planContent" class="space-y-2 text-[15px]"></div>
        </div>

        <!-- 企业信息/个人信息 -->
        <div class="bg-white mt-2 p-4 space-y-4">
            <h2 id="entityTitle" class="text-[17px] font-bold">企业信息</h2>
            <div class="grid grid-cols-1 gap-3 text-[15px] text-gray-700">
                <div id="rowName" class="py-1.5"><span class="text-gray-500">企业名称：</span><span id="corpName" class="font-medium"></span></div>
                <div class="flex flex-wrap gap-6 py-1.5">
                    <div><span class="text-gray-500">证件类型：</span><span id="corpCertType" class="font-medium"></span></div>
                    <div><span class="text-gray-500">证件号码：</span><span id="corpCertNo" class="font-medium"></span></div>
                </div>
                <div id="groupOnly1" class="flex flex-col gap-2">
                    <span class="text-gray-500">证件图片：</span>
                    <img id="corpCertImg" src="" alt="证件图片" class="w-full h-[200px] object-contain bg-gray-50 border rounded" onerror="this.classList.add('hidden')">
                </div>
                <div id="groupOnly2" class="flex flex-col gap-2">
                    <span class="text-gray-500">投保声明缩略图：</span>
                    <div id="declThumb" class="w-full h-[120px] bg-gray-50 border rounded flex items-center justify-center text-gray-600">
                        <i class="fas fa-file-pdf text-red-500 mr-2"></i>
                        <span id="declName">暂无文件</span>
                        <span id="declSize" class="ml-2 text-gray-400 text-[13px]"></span>
                    </div>
                </div>
                <div id="groupOnly3" class="py-1.5"><span class="text-gray-500">营业执照登记住所：</span><span id="corpAddr" class="font-medium"></span></div>
                <div id="groupOnly4" class="flex flex-wrap gap-6 py-1.5">
                    <div><span class="text-gray-500">联系人姓名：</span><span id="contactName" class="font-medium"></span></div>
                    <div><span class="text-gray-500">手机号码：</span><span id="contactPhone" class="font-medium"></span></div>
                    <div><span class="text-gray-500">电子邮箱：</span><span id="contactEmail" class="font-medium"></span></div>
                </div>
            </div>
        </div>


    </div>

    <!-- 底部固定栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t p-4 flex items-center justify-between">
        <div class="text-sm">
            总保费 <span id="totalPremium" class="text-red-600 font-bold text-lg">0</span> 元
        </div>
        <button onclick="showPaymentModal()" class="bg-blue-600 text-white px-8 py-2 rounded-full text-[15px]">
            立即支付
        </button>
    </div>



    <!-- 支付方式选择弹窗 -->
    <div class="modal rounded-t-2xl" id="paymentModal">
        <div class="p-6 h-[60vh] flex flex-col">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-[17px] font-bold">选择支付方式</h3>
                <button onclick="hideModal('paymentModal')" class="text-gray-500 p-2"><i class="fas fa-times text-xl"></i></button>
            </div>
            <div class="space-y-5">
                <div class="text-[15px] text-gray-700">总保费：<span id="modalTotalPremium" class="font-bold text-red-600"></span> 元</div>
                <div class="text-[15px] text-gray-700">代收企业：<span class="font-medium">世纪保险经纪有限责任公司</span></div>
                <div class="flex flex-col space-y-4">
                    <label class="payment-method" onclick="selectPayment('wechat')">
                        <input type="radio" name="paymentMethod" class="form-radio text-blue-600 border-gray-300" value="wechat">
                        <i class="fab fa-weixin text-[#07C160]"></i>
                        <span>微信支付</span>
                    </label>
                    <label class="payment-method" onclick="selectPayment('alipay')">
                        <input type="radio" name="paymentMethod" class="form-radio text-blue-600 border-gray-300" value="alipay">
                        <i class="fab fa-alipay text-[#1677FF]"></i>
                        <span>支付宝支付</span>
                    </label>
                </div>
            </div>
            <div class="mt-auto">
                <button onclick="handlePayment()" class="w-full h-[44px] bg-blue-600 text-white rounded-full text-[15px]">确认支付</button>
            </div>
        </div>
    </div>

    <!-- 微信支付弹窗 -->
    <div class="modal rounded-t-2xl" id="wechatModal">
        <div class="p-6 h-[90vh] flex flex-col">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-[17px] font-bold">微信支付</h3>
                <button onclick="hideModal('wechatModal')" class="text-gray-500 p-2"><i class="fas fa-times text-xl"></i></button>
            </div>
            <div class="flex-1 flex flex-col items-center justify-center text-center">
                <div class="bg-white rounded-lg p-6 shadow-lg w-[300px]">
                    <div class="text-[15px] text-gray-600 mb-4">
                        <div class="mb-2">订单金额</div>
                        <div class="text-[24px] font-bold text-gray-900 mb-4"><span id="wechatModalAmount"></span>元</div>
                        <div class="text-[13px]">请使用微信扫一扫<br>扫描二维码完成支付</div>
                    </div>
                    <img src="assets/images/在线支付弹窗.png" alt="微信支付二维码" class="w-[200px] h-[200px] mx-auto mb-4">
                    <button onclick="handlePaymentSuccess()" class="w-full h-[44px] bg-[#07C160] hover:bg-[#06AE56] text-white rounded-lg text-[15px]">支付</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 支付宝支付弹窗 -->
    <div class="modal rounded-t-2xl" id="alipayModal">
        <div class="p-6 h-[78vh] flex flex-col">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-[17px] font-bold">支付宝支付</h3>
                <button onclick="hideModal('alipayModal')" class="text-gray-500 p-2"><i class="fas fa-times text-xl"></i></button>
            </div>
            <div class="flex flex-col items-center text-center">
                <div class="mb-4">
                    <i class="fab fa-alipay text-[36px] text-[#1677FF] mb-2"></i>
                    <div class="text-[14px] text-gray-600 mb-1">支付保费</div>
                    <div class="text-[20px] font-bold text-red-600"><span id="alipayModalAmount"></span>元</div>
                </div>
                <div class="relative w-[200px] h-[200px] bg-gray-100 rounded mb-3 flex items-center justify-center text-gray-400">
                    <i class="fas fa-qrcode text-[40px]"></i>
                </div>
                <p class="text-[14px] text-gray-600 leading-5 mb-4">请使用支付宝APP扫码支付，<br>或截图保存并转发到支付宝用户继续支付</p>
            </div>
            <div class="pt-4">
                <div class="flex gap-3">
                    <button onclick="hideModal('alipayModal')" class="flex-1 h-[44px] border rounded-full text-[15px]">取消</button>
                    <button onclick="handlePaymentSuccess()" class="flex-1 h-[44px] bg-blue-600 text-white rounded-full text-[15px]">已完成支付</button>
                </div>
            </div>
            <!-- 底部留空白区域 -->
            <div class="flex-1"></div>
        </div>
    </div>

    <!-- 遮罩层 -->
    <div class="modal-backdrop" id="modalBackdrop"></div>

    <script>
        // 状态
        let modalStack = [];
        let selectedPayment = '';

        // 工具
        function showToast(message, type = 'info') {
            const toast = document.createElement('div');
            toast.className = 'fixed top-4 left-1/2 transform -translate-x-1/2 z-50 px-4 py-2 rounded-lg text-white text-[14px] shadow-lg';
            toast.classList.add(type === 'error' ? 'bg-red-600' : type === 'success' ? 'bg-green-600' : 'bg-blue-600');
            toast.innerHTML = message;
            document.body.appendChild(toast);
            setTimeout(() => { toast.style.opacity = '0'; toast.style.transition = 'opacity .5s ease'; setTimeout(()=>toast.remove(), 500); }, 2200);
        }

        function showModal(id){
            const modal = document.getElementById(id);
            const backdrop = document.getElementById('modalBackdrop');
            modalStack.push(id);
            modal.style.display = 'block';
            setTimeout(()=>modal.classList.add('show'),10);
            if(modalStack.length===1){ backdrop.classList.add('show'); }
        }

        function hideModal(id){
            const modal = document.getElementById(id);
            const backdrop = document.getElementById('modalBackdrop');
            modalStack = modalStack.filter(x=>x!==id);
            modal.classList.remove('show');
            setTimeout(()=>{ modal.style.display='none'; },300);
            if(modalStack.length===0){ backdrop.classList.remove('show'); }
        }

        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 产品与期间
            const start = localStorage.getItem('startDate') || '';
            const end = localStorage.getItem('endDate') || '';
            document.getElementById('startText').textContent = start.replace('T',' ');
            document.getElementById('endText').textContent = end.replace('T',' ');
            document.getElementById('periodText').textContent = localStorage.getItem('insurancePeriodLabel') || '1年';

            document.getElementById('productName').textContent = localStorage.getItem('productName') || '液化气用户家财险';
            document.getElementById('insurer').textContent = localStorage.getItem('insurer') || '人保财险';
            document.getElementById('quantityText').textContent = (localStorage.getItem('insuranceQuantity') || '1') + '份';

            // 方案与保费
            const plan = localStorage.getItem('selectedPlan') || 'basic';
            const planName = localStorage.getItem('planName') || '基础款';
            document.getElementById('planName').textContent = planName;
            renderPlan(plan);
            const totalPremium = localStorage.getItem('totalPremium') || '10';
            document.getElementById('totalPremium').textContent = totalPremium;
            document.getElementById('modalTotalPremium').textContent = totalPremium;
            document.getElementById('headerTotalPremium').textContent = totalPremium;

            // 用户类型分支
            const userType = localStorage.getItem('userType') || 'group';
            document.getElementById('entityTitle').textContent = userType === 'group' ? '企业信息' : '投保人信息';
            if (userType === 'group') {
                try {
                    const corp = JSON.parse(localStorage.getItem('enterpriseInfo') || '{}');
                    document.getElementById('corpName').textContent = corp.enterpriseName || '';
                    document.getElementById('corpCertType').textContent = corp.enterpriseCertTypeText || '';
                    document.getElementById('corpCertNo').textContent = corp.enterpriseCertNumber || '';
                    if (corp.licenseImg) {
                        document.getElementById('corpCertImg').src = corp.licenseImg;
                        document.getElementById('corpCertImg').classList.remove('hidden');
                    }
                    document.getElementById('declName').textContent = corp.declarationFileName || '暂无文件';
                    document.getElementById('declSize').textContent = corp.declarationFileSize ? '(' + corp.declarationFileSize + ')' : '';
                    document.getElementById('corpAddr').textContent = corp.enterpriseAddress || '';
                    document.getElementById('contactName').textContent = corp.contactName || '';
                    document.getElementById('contactPhone').textContent = corp.contactPhone || '';
                    document.getElementById('contactEmail').textContent = corp.contactEmail || '';
                } catch(e) {}
            } else {
                // 个人用户，改动标签"企业名称"为"投保人姓名"
                document.querySelector('#rowName span.text-gray-500').textContent = '投保人姓名：';
                // 隐藏团体专属字段
                document.getElementById('groupOnly1').classList.add('hidden');
                document.getElementById('groupOnly2').classList.add('hidden');
                document.getElementById('groupOnly3').classList.add('hidden');
                document.getElementById('groupOnly4').classList.add('hidden');
                try {
                    const person = JSON.parse(localStorage.getItem('personalInfo') || '{}');
                    document.getElementById('corpName').textContent = person.personName || '';
                    document.getElementById('corpCertType').textContent = person.idTypeText || '';
                    document.getElementById('corpCertNo').textContent = person.idNumber || '';
                    // 补充显示性别/出生日期和燃气险特有字段
                    const wrap = document.querySelector('#entityTitle').parentElement.querySelector('.grid');
                    const extra = document.createElement('div');
                    extra.className = 'flex flex-wrap gap-6 py-1.5';
                    extra.innerHTML = `
                        <div><span class="text-gray-500">性别：</span><span class="font-medium">${person.genderText || ''}</span></div>
                        <div><span class="text-gray-500">出生日期：</span><span class="font-medium">${person.birthDate || ''}</span></div>
                        <div><span class="text-gray-500">手机号：</span><span class="font-medium">${person.phone || ''}</span></div>
                        <div><span class="text-gray-500">电子邮箱：</span><span class="font-medium">${person.email || ''}</span></div>`;
                    wrap.appendChild(extra);
                    
                    // 液化气险特有字段
                    const gasInfo = document.createElement('div');
                    gasInfo.className = 'py-1.5';
                    gasInfo.innerHTML = `<span class="text-gray-500">液化气用户（卡）号：</span><span class="font-medium">${person.gasUserNumber || ''}</span>`;
                    wrap.appendChild(gasInfo);
                    
                    // 被保险家庭地址
                    const addressInfo = document.createElement('div');
                    addressInfo.className = 'py-1.5';
                    addressInfo.innerHTML = `<span class="text-gray-500">被保险家庭地址：</span><span class="font-medium">${person.address?.fullAddress || ''}</span>`;
                    wrap.appendChild(addressInfo);
                } catch(e) {}
            }


        });

        function renderPlan(plan){
            const content = document.getElementById('planContent');
            
            // 液化气用户家财险保障方案
            if (plan === 'basic') {
                content.innerHTML = `
                    <div class="space-y-2">
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">保障期间</span><span class="font-medium">1年</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">投保年龄</span><span class="font-medium">18周岁(含)-90周岁(含)</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">室内财产损失</span><span class="font-medium text-red-600">5万/户</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">人身意外身故残疾及意外医疗（三者）</span><span class="font-medium text-red-600">2万/人</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">人身意外身故/残疾</span><span class="font-medium text-red-600">2万/人</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">意外医疗</span><span class="font-medium text-red-600">5000元/人</span></div>
                    </div>`;
            } else if (plan === 'upgrade') {
                content.innerHTML = `
                    <div class="space-y-2">
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">保障期间</span><span class="font-medium">1年</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">投保年龄</span><span class="font-medium">18周岁(含)-90周岁(含)</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">室内财产损失</span><span class="font-medium text-red-600">10万/户</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">人身意外身故残疾及意外医疗（三者）</span><span class="font-medium text-red-600">5万/人</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">人身意外身故/残疾</span><span class="font-medium text-red-600">5万/人</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">意外医疗</span><span class="font-medium text-red-600">1万/人</span></div>
                    </div>`;
            } else if (plan === 'premium') {
                content.innerHTML = `
                    <div class="space-y-2">
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">保障期间</span><span class="font-medium">1年</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">投保年龄</span><span class="font-medium">18周岁(含)-90周岁(含)</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">室内财产损失</span><span class="font-medium text-red-600">20万/户</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">人身意外身故残疾及意外医疗（三者）</span><span class="font-medium text-red-600">10万/人</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">人身意外身故/残疾</span><span class="font-medium text-red-600">10万/人</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">意外医疗</span><span class="font-medium text-red-600">2万/人</span></div>
                    </div>`;
            } else {
                // 默认显示基础款
                content.innerHTML = `
                    <div class="space-y-2">
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">保障期间</span><span class="font-medium">1年</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">投保年龄</span><span class="font-medium">18周岁(含)-90周岁(含)</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">室内财产损失</span><span class="font-medium text-red-600">5万/户</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">人身意外身故残疾及意外医疗（三者）</span><span class="font-medium text-red-600">2万/人</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">人身意外身故/残疾</span><span class="font-medium text-red-600">2万/人</span></div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100"><span class="text-gray-600">意外医疗</span><span class="font-medium text-red-600">5000元/人</span></div>
                    </div>`;
            }
        }



        // 支付相关
        function showPaymentModal(){
            selectedPayment = '';
            document.querySelectorAll('input[name="paymentMethod"]').forEach(radio => {
                radio.checked = false;
            });
            document.querySelectorAll('.payment-method').forEach(el => el.classList.remove('active'));
            showModal('paymentModal');
        }

        function selectPayment(type){
            selectedPayment = type;
            // 更新单选框状态
            document.querySelectorAll('input[name="paymentMethod"]').forEach(radio => {
                radio.checked = radio.value === type;
            });
            // 更新支付方式样式
            document.querySelectorAll('.payment-method').forEach(el => {
                const radio = el.querySelector('input[type="radio"]');
                el.classList.toggle('active', radio && radio.value === type);
            });
        }

        function handlePayment(){
            if(!selectedPayment){
                showToast('请选择支付方式', 'error');
                return;
            }
            hideModal('paymentModal');
            if(selectedPayment === 'wechat'){
                // 设置微信支付弹窗金额
                document.getElementById('wechatModalAmount').textContent = document.getElementById('modalTotalPremium').textContent;
                showModal('wechatModal');
            } else {
                // 设置支付宝支付弹窗金额
                document.getElementById('alipayModalAmount').textContent = document.getElementById('modalTotalPremium').textContent;
                showModal('alipayModal');
            }
        }

        function handlePaymentSuccess(){
            // 模拟支付成功
            showToast('支付成功', 'success');
            setTimeout(() => {
                window.location.href = 'complete.html';
            }, 1000);
        }
    </script>
</body>
</html>